import React,{useEffect,useState} from 'react'


const Wear = () => {

    const [wear,setWear] = useState([]);

    useEffect(()=>{
        fetch(`https://api.124ss.xyz:2355/wear?rand=$1`,{
          method: "GET",
          mode: "cors",
          headers: {
            "Content-Type": "text/plain"
          }
    
        }).then(res => {
          return res.json();
        })
        .then(res =>{
            var arr = [];
            var wearObj = [];
            res.forEach((item,index) => {
                wearObj = [
                    item['wear_id'],
                    item['wear_name'],
                    item['wear_image'],
                    item['wear_text']
                ]
                arr.push(wearObj)
            } )
            setWear(arr)
        })
        .catch((err)=>{
          console.log("err:",err);
        })
      },[]
    )

    const DelItem = (idx,item) => {
  
        fetch(`https://api.124ss.xyz:2355/delWear/${item[0]}`,{
          method: "delete",
          mode: "cors",
          headers: {
            "Content-Type": "text/plain"
          },
          body: JSON.stringify({
            wear_id: item[0]
          })
    
        }).then(res => {
          return res.text();
        })
        .then(res =>{
          console.log(res)
        } )
        .catch((err)=>{
          console.log("err:",err);
        })
    
        let newWear = wear.filter((_,index)=>idx!=index);
        setWear(newWear);
    
      }


    return (
        <div>
            <table>
                <thead>
                    <tr>
                      <th style={{paddingLeft: 60, fontSize: 20, fontFamily: 'SimSun'}}></th>
                      <th style={{paddingLeft: 60, fontSize: 20, fontFamily: 'SimSun'}}>穿搭</th>
                      <th style={{paddingLeft: 60, fontSize: 20, fontFamily: 'SimSun'}}>服装&&配饰</th>
                      <th style={{paddingLeft: 60, fontSize: 20, fontFamily: 'SimSun'}}>操作</th>
                    </tr>
                </thead>
                <tbody>
                {
                    wear.map((item, index) =>
                    <tr>
                      <td style={{paddingTop: 20,paddingLeft: 60, textAlign: 'center'}}>
                        <img style={{width: 100, height: 100}} src={'https://api.124ss.xyz:2355/images/' + item[2]} />
                      </td>
                      <td style={{paddingTop: 20,paddingLeft: 60, textAlign: 'center',fontSize: 10}}>{item[1]}</td>
                      <td style={{paddingTop: 20,paddingLeft: 60,fontSize: 10}}>{item[3]}</td>
                      <td style={{paddingTop: 20,paddingLeft: 60, textAlign: 'center'}}>
                        <button onClick={() => DelItem(index,item)}>
                          删除
                        </button>
                      </td>
                    </tr>)
                }
                </tbody>
            </table>
        </div>
    )
}

export default Wear
